<template>
  <aside class="app-sidebar" :class="{ 'sidebar-collapsed': !appStore.sidebarVisible }">
    <nav class="sidebar-nav">
      <ul class="nav-list">
        <li class="nav-item">
          <router-link to="/" class="nav-link" active-class="active">
            <el-icon><House /></el-icon>
            <span class="nav-text">首页</span>
          </router-link>
        </li>
        
        <li class="nav-item">
          <router-link to="/albums" class="nav-link" active-class="active">
            <el-icon><Collection /></el-icon>
            <span class="nav-text">相册</span>
          </router-link>
        </li>
        
        <li class="nav-item">
          <router-link to="/search" class="nav-link" active-class="active">
            <el-icon><Search /></el-icon>
            <span class="nav-text">搜索</span>
          </router-link>
        </li>
        
        <li class="nav-divider"></li>
        
        <li class="nav-item">
          <router-link to="/recent" class="nav-link" active-class="active">
            <el-icon><Clock /></el-icon>
            <span class="nav-text">最近添加</span>
          </router-link>
        </li>
        
        <li class="nav-item">
          <router-link to="/favorites" class="nav-link" active-class="active">
            <el-icon><Star /></el-icon>
            <span class="nav-text">收藏</span>
          </router-link>
        </li>
        
        <li class="nav-item">
          <router-link to="/trash" class="nav-link" active-class="active">
            <el-icon><Delete /></el-icon>
            <span class="nav-text">回收站</span>
          </router-link>
        </li>
      </ul>
    </nav>
    
    <div class="sidebar-footer">
      <div class="storage-info">
        <div class="storage-bar">
          <div class="storage-used" :style="{ width: storagePercentage + '%' }"></div>
        </div>
        <div class="storage-text">
          {{ storageUsed }} / {{ storageTotal }}
        </div>
      </div>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/stores/app';
import { ElIcon } from 'element-plus';
import { House, Collection, Search, Clock, Star, Delete } from '@element-plus/icons-vue';

const appStore = useAppStore();

// 存储信息（模拟数据）
const storageUsed = computed(() => '15.2 GB');
const storageTotal = computed(() => '50 GB');
const storagePercentage = computed(() => {
  const used = 15.2;
  const total = 50;
  return (used / total) * 100;
});
</script>

<style scoped lang="scss">
.app-sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 240px;
  height: calc(100vh - 60px);
  background-color: var(--el-bg-color-page);
  border-right: 1px solid var(--el-border-color-light);
  transition: transform 0.3s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  
  &.sidebar-collapsed {
    transform: translateX(-100%);
  }
  
  .sidebar-nav {
    flex: 1;
    padding: 20px 0;
    overflow-y: auto;
    
    .nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      
      .nav-item {
        margin-bottom: 5px;
        
        .nav-link {
          display: flex;
          align-items: center;
          padding: 12px 20px;
          color: var(--el-text-color-regular);
          text-decoration: none;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: var(--el-fill-color-light);
            color: var(--el-color-primary);
          }
          
          &.active {
            background-color: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
            font-weight: 500;
            
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              height: 100%;
              width: 4px;
              background-color: var(--el-color-primary);
            }
          }
          
          .el-icon {
            margin-right: 12px;
            font-size: 18px;
          }
          
          .nav-text {
            font-size: 14px;
          }
        }
      }
      
      .nav-divider {
        height: 1px;
        background-color: var(--el-border-color-lighter);
        margin: 15px 20px;
      }
    }
  }
  
  .sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--el-border-color-lighter);
    
    .storage-info {
      .storage-bar {
        height: 6px;
        background-color: var(--el-fill-color-light);
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 8px;
        
        .storage-used {
          height: 100%;
          background-color: var(--el-color-primary);
          transition: width 0.3s ease;
        }
      }
      
      .storage-text {
        font-size: 12px;
        color: var(--el-text-color-secondary);
        text-align: center;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-sidebar {
    width: 200px;
  }
}
</style>